<template>
  <div class="exemplaryProcessPlan">
    <el-table
      ref="overlap"
      :key="keytable"
      :data="date"
      :height="height ||'auto'"
      style="width: 100%;color: pink;"
      border
      v-bind="tableProps"
      :lazy="true"
      :load="lazyLoading"
      :header-cell-change="headerCellStyle"
      @selection-change="handleSelectionChange"
      @row-click="rowClick"
    >
      <el-table-column
        v-if="selection"
        type="'selection"
        width="55"
      />
      <el-table-column
        v-if="indexRow&&indexRow.title"
        type="index"
        v-bind="indexRow"
        :label="indexRow.title"
        :width="indexRow.width"
        :align="indexRow.align"
      >
        <template slot-scope="scope">
          <span v-if="pageSet &&pageSet.pageSize">
            {{ ((pageSet.currentPage-1)*pageSet.pageSize +scope.$index+1) }}
          </span>
          <span v-else>
            {{ scope.$index+1 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(col,index) in showTableData"
        :key="index"
        :prop="col.key"
        :label="col.title"
        border
        :min-width="col.minWidth"
        :align="col.align"
        resizable
        :header-align="col.headerAlign"
        :fixed="col.fixed || false"
      >
        <template slot-scope="scope" >
          <renderComponent
          v-if="col.component"
            :render-function="col.component.render"
            :scope="scope"
          />
          <div v-else>
            {{ scope.row[col.key] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pageSet && pageSet.pageSize" class="pagination">
      <el-pagination
        :current-page="pageSet.currentPage"
        :page-sizes="pageSet.pageSizes||[100, 200, 300, 400]"
        :page-size="pageSet.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageSet.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import  renderComponent  from './renderComponent.vue'
export default {
  name: 'OverTable',
  components: { renderComponent },
  props: {
    date: {
      type: Array,
      default: () => null
    },
    tableData: {
      type: Array,
      default: () => null
    },
    selection: {
      type: Boolean,
      default: false
    },
    indexRow: {
      type: Object,
      default: () => null
    },
    pageSet: {
      type: Object,
      default: () => null
    },
    height: {
      type: [Number, String],
      default: ''
    },
    tableProps: {
      type: Object,
      default: () => null
    },
    treeProps: {
      type: Object,
      default: () => null
    },
    timeFormat: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    headerCellStyle: {
      type: Object,
      default: () => ({
        background: '#F3F6F7'
      })
    }
  },
  data() {
    return {
      selecteds: [],
      current: null,
      keytable: 0,
      cloNum: 0
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    showTableData() {
      if (!Array.isArray(this.tableData)) return []
      // eslint-disable-next-line no-unused-vars
      // const genColums = cloums => {
      //   console.log(1111);
      //   const tableData = []
      //   cloums.forEach(col => {
      //     console.log(col,'col');
      //     if (!col.hide) {
      //       tableData.push(col)
      //     }
      //     if (col.child) col.child = genColums(col.child)
      //   })
        
      // }
      return this.tableData || []
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  activated() {
  },
  beforeDestroy() {
  },
  methods: {
    lazyLoading(tree, treeNode, resolve) {
      this.$emit('load', tree, treeNode, resolve)
    },
    handleSelectionChange(rows) {
      this.selecteds = rows
      this.$emit('selection-change', this.selecteds)
    },
    rowClick(row) {
      this.current = row
      this.$emit('row-click', this.current)
    },
    handleCurrentChange(val) {
      // this.pageSet.currentPage = val
      this.$emit('pageChange', val)
    },
    handleSizeChange(val) {
      // this.pageSet.pageSize = val
      this.$emit('handleSizeChange', val)
    },
    getRowKey(row) {
      return row.id
    }
  }
}
</script>
<style lang='scss'>
.exemplaryProcessPlan{
  .el-table thead{
    font-size: 14px;
    color: #2e2e2e;
  }
  .el-table .el-table__cell{
    padding: 6px;
  }
  .pagination{
    padding-top: 10px;
    padding-right: 10px;
    float: right;
  }
}
</style>
